<template lang="html">
  <section class="components-order_detail-info" v-if="orderDetail">
    <div class="detTitle">
      <h1>{{orderDetail.subjectName}}</h1>
      <p>{{orderDetail.coachName}}</p>
      <p><span>订单金额：</span> <span>¥ <span class="price">{{orderDetail.currentPrice}}</span> RMB</span><span class="priceBef">{{orderDetail.originalPrice}} RMB <div></div></span></p>
      <p class="timeadd">
        <span>时间：</span>
        <span>
          {{orderDetail.showDate}}|{{orderDetail.showWeek}} {{orderDetail.timeLimit}}
           <!-- <i class="icon-calendar"></i>  -->
        </span>
      </p>
      <p class="timeadd">
        <span>店址：</span>
        <span @click="openLocation">
          {{orderDetail.city}}·{{orderDetail.area}}·{{orderDetail.address}}
          <i class="ic-location"></i>
        </span>
      </p>
    </div>
    <button class="joinWX" @click="previewWechatGroup(orderDetail.weChatGroup)">点击加入微信群</button>
    <div class="reminder" :class="className">
      <span>{{tag}}</span>
      <div class="tri"></div>
      <div class="triright"></div>
    </div>
  </section>
</template>

<script>
import utils from '@/lib/utils'
export default {
  props: {
    orderDetail: {
      type: Object,
      required: true
    }
  },
  computed: {
    tag(){
      if(!this.orderDetail) return
      switch (this.orderDetail.orderStatus) {
        case 1:
          return '待上课'
          // break;
        case 2:
          return '已完成'
        case 3:
          return '已退课'
        default:
          return '待上课'
      }
    },
    className(){
      if(!this.orderDetail) return
      switch (this.orderDetail.orderStatus) {
        case 1:
          return 'remain'
          // break;
        case 2:
          return 'finish'
        case 3:
          return 'cancel'
        default:
          return 'remain'
      }
    },
    location(){
      if(!this.orderDetail) return
      let latitude = this.orderDetail.location.split(',')[1]
      let longitude = this.orderDetail.location.split(',')[0]
      return {
        longitude,
        latitude
      }
    }
  },
  methods: {
    openLocation(){
      let self = this
      if(utils.os('weixin')){
        this.$store.dispatch('wxLocation', {
          latitude: self.location.latitude,
          longitude: self.location.longitude,
          name: self.orderDetail.storeName
        })
      }
    },
    previewWechatGroup(current){
      wx.previewImage({
          current, // 当前显示图片的http链接
          urls:[current] // 需要预览的图片http链接列表
      });
    }
  },
}
</script>

<style lang="scss" scoped>
@import "../../css/config";
.components-order_detail-info{
  position: relative;
  width: 100%;
  // width: 662px;
  /*height: 320px;*/
  box-sizing: border-box;
  padding: 30px 50px 38px 50px;
  background-color: #f5f5f5;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .joinWX{
    display: block;
    margin: 0 auto;
    width: 308px;
    height: 74px;
    border-radius: 10px;
    font-size: 30px;
    color: #fff;
    font-weight: 100;
    background-color: $common-red;
    &:active{
      color: $active-font;
      background-color: $active-bg;
    }
  }
  .detTitle{
    overflow: hidden;
  }
  .detTitle>h1{
    font-size: 32.53px;
    font-weight: bolder;
    margin-bottom: 16px;
  }
  .detTitle>p{
    font-size: 25px;
    margin-bottom: 16px;
    line-height: 30px;
  }
  .detTitle>p>span:nth-child(1){
    font-weight: bolder;
    color: #3c3c3c;
  }
  .detTitle>p:nth-of-type(1){
    color: #606060;
  }
  .price{
    color: #f05831;
    font-weight: bolder;
  }
  .priceBef{
    display: inline-block;
    position: relative;
    color: #979797;
    margin-left: 34px;
    text-decoration: #ef572e;
  }
  .priceBef>div{
    width: 110px;
    border-bottom: 2px solid #ef572e;
    position: absolute;
    bottom: 50%;
    left: -5px;
  }
  .icon-calendar{
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
    width: 30px;
    height: 30px;
    background: url('../../assets/image/calendar.png') no-repeat center;
    background-size: cover;
  }
  .ic-location{
    display: inline-block;
    vertical-align: middle;
    font-size: 35px;
    margin-top: -5px;
    padding-left: 5px;
    color: $common-red;
  }
  .timeadd>span:nth-child(2){
    color: #3c3c3c;
  }
  .lessonDetail>button{
    height: 74px;
    width: 310px;
    font-size: 29.61px;
    color: #FFFFFF;
    background-color: #ff4908;
    border-radius: 15px;
    margin: 0 auto;
    letter-spacing: 1px;
    margin-top: 6px;
  }
  .reminder{
    position: absolute;
    top: 0;
    right: 38px;
    font-size: 25px;
    color: #FFFFFF;
    padding: 16px 5px 16px;
    box-sizing: border-box;
    text-align: center;
    /*三角形*/
    .tri{
      position: absolute;
      bottom: -28px;
      left: 0;
      width: 0;
      height: 0;
      border-left: 0 solid transparent;
      border-right: 50px solid transparent;
      border-top: 28px solid $common-red;
      // border-top: 28px solid #f0582f;
    }
    .triright{
      position: absolute;
      bottom: -28px;
      right: 0;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 0 solid transparent;
      border-top: 28px solid $common-red;
      // border-top: 28px solid #f0582f;
    }
    &.remain{
      background-color: $common-red;
      .tri, .triright{
        border-top: 28px solid $common-red;
      }
    }
    &.finish{
      background-color: #e0ff6a;
      color: #000;
      .tri, .triright{
        border-top: 28px solid #e0ff6a;
      }
    }
    &.cancel{
      background-color: #a9a9a9;
      .tri, .triright{
        border-top: 28px solid #a9a9a9;
      }
    }
  }

}
</style>
